<template>
  <el-tabs
      class="group-tabs"
      v-model="active"
      type="card"
      :stretch="false"
      tab-position="top"
      @tab-click="tabClick"
  >
    <el-tab-pane class="group-tab-pane" label="基本信息" name="brief">
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="应用属性" name="attr">
      <AttributeList
          :ref="'attr'"
          :entry="entry"/>
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="授权接口" name="api">
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="接口日志" name="apiLog">
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import AttributeList from '@/widget/list/AttributeList.vue'
import RoleHolderList from '@/widget/holder/RoleHolderList.vue'
import UserHolderList from '@/widget/holder/UserHolderList.vue'
import GroupHolderList from '@/widget/holder/GroupHolderList.vue'
import ClientHolderList from '@/widget/holder/ClientHolderList.vue'

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/UseListTabs";
import {ref} from "vue";

const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('attr');

defineExpose({
  handleCurrent,
  handleSwitch,
})

const entry = ref({
  name: currentNames.APPLICATION,
  type: '',
  server: SERVERS.PLATFORM
});

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}
</style>
